<template>
    <div class="login_container">
         <!--注册-->
    <el-dialog
    title="注册"
    :visible.sync="registerDialogVisible"
    width="50%">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
        <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
            <template>
                <el-radio v-model="addForm.gender" :label="1">男</el-radio>
                <el-radio v-model="addForm.gender" :label="2">女</el-radio>
              </template>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
            <el-date-picker clearable
                v-model="addForm.birthday"
                type="date"
                placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
    </el-form>
    <!--底部区-->
    <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="register">确认注册</el-button>
        
    </span>
    </el-dialog>
      <div class="login_box">
        <div class="avatar_box">
          <img src="../../assets/logo.png">
        </div>
  
        <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" class="login_form">
          <!--用户名-->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
  
          <!--密码-->
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
          </el-form-item>
  
          <!--按钮区域-->
          <el-form-item class="btns">
             <el-button type="primary" @click="login">登录</el-button>
             <el-button type="danger" @click="Toregister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>

<script>
    export default{
        data() {
            return {
                registerDialogVisible:false,
                loginFormRef:false,
                addForm:{
                    username:'',
                    password:'',
                    gender:'',
                    birthday:''
                },
                loginForm:{
                    username:'',
                    password:'',
                },
                addFormRules:{
                    username:[
                        { required: true, message: '请输入登录名称', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2到 5 个字符', trigger: 'blur' }
                    ] ,
                        //验证密码是否合法
                    password:[
                        { required: true, message: '请输入登录名称', trigger: 'blur' },
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ],
                    gender:[
                        { required: true, message: '性别', trigger: 'blur' },
                   
                    ],
                    birthday:[
                        { required: true, message: '生日', trigger: 'blur' },
                      
                ]},
                loginFormRules:{
                  username:[
                        { required: true, message: '请输入登录名称', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ] ,
                        //验证密码是否合法
                    password:[
                        { required: true, message: '请输入登录名称', trigger: 'blur' },
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ]
                }
                
                

            }
        },
        created() {
            
        },
        methods: {
            login(){
                this.$refs.loginFormRef.validate(async valid => {
                    if(!valid) return 
                    console.log(this.loginForm)
                    const {data:res} = await this.$http.post('login/',this.loginForm)
                    console.log(res)
                    if(res.code !== 1000) return 
                    this.$message.success('登录成功')
                    window.sessionStorage.setItem("token",res.token);
                    this.$router.push('/page')
                })
                
            },
            Toregister(){
                this.registerDialogVisible = true
                
            },
            register(){
                this.$refs.addFormRef.validate(async valid => {
                    if(!valid) return 
                    const {data:res} = await this.$http.post('register/',this.addForm)
                    if(res.code !== 1000) return 
                    this.$message.success('注册成功')
                    this.$router.push('/home')
                })
            }
        },
    }
</script>

<style lang="less" scoped>
        .login_container{
      background-color: #2b4b6b;
      height: 100%;
    }

    .login_box{
      width:450px;
      height:300px;
      background-color: #fff;
      border-radius:3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);

      .avatar_box{
        height: 130px;
        width:130px;
        border:1px solid blue;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #eeeeee;
        img{
          width: 100%;
          height:100%;
          border-radius: 50%;
          background-color: grey;
        }
      }
    }

    .btns{
      display: flex;
      justify-content: flex-end;
    }

    .login_form{
      position: absolute;
      bottom:0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }

</style>
